<script lang="ts" setup>
import Criticality from './components/criticality/Criticality.vue';
</script>

<template>
  <div class="main" >
    <!-- userinfo -->
    <div class="user-info" >
      <div class="left" >
        <img 
          class="lock"
          src="@/image/lock.png" 
          alt="lock" 
        >
        <div
          class="text"
        >
          <div>Assets</div>
          <div>> Assets > AST-3</div>
        </div>
      </div>
      <div class="right" >
        <div class="add-asset" >
          <el-icon><Plus /></el-icon>
          Add asset
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content" >
      <div class="content-left" >
        <div class="block" ></div>
        <div class="block" >
          <Criticality/>
        </div>
        <div class="block" ></div>
        <div class="block" ></div>
        <div class="block" ></div>
      </div>
      <div class="content-right" >
        <div class="properties" >
          properties
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss" >
.main{
  background: #f2f3f5;
  height: 100%;
  .user-info{
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      .lock{
        height: 4rem;
        width: 4rem;
      }
      .text{
        font-size: 0.8rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0.5rem;
      }
    }
    .right{
      .add-asset{
        font-size: .9rem;
        display: inline-block;
        background: #252629;
        color: #fff;
        padding: .6rem;
        border-radius: .5rem;
      }
    }
  }
  .content{
    width: 100%;
    display: flex;
    padding:  0 1rem;
    .content-left{
      width: calc(100% - 300px);
      display: flex;
      flex-direction: column;
      align-items: center;
      .block{
        width: 100%;
        min-height: 10rem;
        background: #fff;
        margin-bottom: 1rem;
        padding: 1rem;
      }
    }
    .content-right{
        margin: 0 0 0 1rem;
        width: 300px;
        height: 500px;
        background: #fff;
    }
  }
}

@media (max-width: 1100px) {
  .main{
    .content{
      .content-left{
        width: 100%
      }
      .content-right{
        display: none;
      }
    }
  }
}

</style>
